<script lang="ts" setup>
import { ref, h } from "vue";
import { deviceDetection } from "@pureadmin/utils";

import attachment_list from "@/views/components/attachment/index.vue";
import UploadIcon from "@iconify-icons/ri/upload-2-line";

import type { UploadProps, UploadUserFile } from "element-plus";
import { addDialog } from "@/components/ReDialog";

const { VITE_UPLOAD_URL } = import.meta.env;
const maxUploadNum = 3;
const fileList = ref<UploadUserFile[]>([]);
const formRef = ref();
function submitForm() {
  console.log(fileList.value);
}

function addDialogFile(status) {
  addDialog({
    title: "选择附件",
    props: {
      formInline: {
        status: status,
        fileList: []
      }
    },
    top: "2vh",
    width: "60%",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(attachment_list),
    beforeSure: (done, { options }) => {
      const curData = options.props.formInline;
      function chores() {
        done();
      }

      // 判断curData.fileList 是否为数组
      if (!status && curData.fileList.url) {
        if (fileList.value.length >= maxUploadNum) {
          chores();
          return;
        }
        fileList.value.push({
          name: curData.fileList.filename,
          url: curData.fileList.url
        });
      } else {
        curData.fileList.forEach(element => {
          if (fileList.value.length >= maxUploadNum) {
            return;
          }
          fileList.value.push({
            name: element.filename,
            url: element.url
          });
        });
      }
      chores();
    }
  });
}

function handSuccess(response, file, fileList) {
  console.log(response, file, fileList);
}

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>

<template>
  <div>
    <el-upload
      v-model:file-list="fileList"
      :action="VITE_UPLOAD_URL"
      list-type="picture-card"
      multiple
      drag
      :auto-upload="false"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handSuccess"
    >
      <div class="el-upload__text">
        <IconifyIconOffline :icon="UploadIcon" width="26" class="m-auto mb-2" />
        可点击或拖拽上传
      </div>
    </el-upload>

    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>

    <el-button type="primary" @click="submitForm()">提交</el-button>
    <el-button type="primary" @click="addDialogFile(false)">单个选择</el-button>
    <el-button type="primary" @click="addDialogFile(true)">多个选择</el-button>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-upload-dragger) {
  background-color: transparent;
  border: none;
}
</style>
